<template>
  <div class="order">
    <div class="code">
      <el-dialog
          :visible.sync="dialogVisible"
          width="30%"
          @close="handleClose">
        <div class="content-code">
          <img :src="qrcode" class="img-qrcode"/><br>
          <span class="detail-code">扫码上方二维码进行支付哦！</span>
        </div>
      </el-dialog>
    </div>
    <div class="header">
      <span class="after"><i class="el-icon-s-order"></i>订单详情</span>
      <div class="pay-header" v-if="!headerVisible">
        <span class="state">当前订单状态：<span class="ss">{{ state }}</span></span><br>
      </div>
      <div class="pay-header" v-if="headerVisible">
        <span class="state"><i class="el-icon-warning-outline"></i>当前订单状态：<span class="ss">{{ state }}</span></span><br>
        <el-button class="btn btn1" @click="againPay">支付</el-button>
        <el-button class="btn" @click="cancal">取消订单</el-button>
        <span class="daojishi">{{minutes}}分{{seconds}}秒后自动关闭</span>
      </div>
    </div>
    <div class="content">
      <span class="content-title">订单信息</span>
      <div class="content-header">
        <span class="cc">收获地址：</span>
        <span class="a d">{{ detailOrder.address }}</span><br><br>
        <span class="cc">运送方式：</span>
        <span class="a d">快递 包邮</span>
        <hr>
        <span class="cc">买家信息</span><br>
        <span class="a b f">收货人：<span class="e">{{ detailOrder.receiver }}</span></span>
        <span class="a f">联系电话：<span class="e">{{ detailOrder.tel }}</span></span>
        <hr>
        <span class="cc">订单信息：</span><br>
        <span class="a b f">订单编号：<span class="e">{{ detailOrder.outTradeNo }}</span></span>
        <span class="a b f">创建时间：<span class="e">{{ detailOrder.createdTime }}</span></span><br>
        <span class="a f">订单备注：<span class="e">{{ detailOrder.note }}</span></span>
        <div class="table">
          <el-table
              :data="tableOrder"
              border
              style="width: 100%"
          >
            <el-table-column
                label="商品"
            >
              <template slot-scope="scope">
                <img class="bookImg" style="height: 120px" :src="$store.state.baseImgUrl+scope.row.book.img">
                <span class="bookTitle">{{ scope.row.book.name }}</span>
              </template>
            </el-table-column>
            <el-table-column
                label="商品属性"
                width="250"
                align="center">
              <template slot-scope="scope">
                图书规格：{{ scope.row.book.spec }}<br>包装装订：{{ scope.row.book.binding }}<br>
                印张/字数：{{ scope.row.book.sheet }}/{{ scope.row.book.words }}
              </template>
            </el-table-column>
            <el-table-column
                label="单价"
                align="center"
                width="100">
              <template slot-scope="scope">
                ￥{{ scope.row.book.price |rounding}}
              </template>
            </el-table-column>
            <el-table-column
                label="数量"
                align="center"
                width="100">
              <template slot-scope="scope">
                {{ scope.row.count }}
              </template>
            </el-table-column>
            <el-table-column
                label="交易状态"
                width="120"
                align="center">
                {{ state}}
            </el-table-column>
          </el-table>
        </div>
        <span class="total">付款金额：<span class="num">￥{{ total|rounding }}</span>元</span>
      </div>
    </div>
  </div>
</template>

<script>


export default {
  name: "DetailToOrder",
  data() {
    return {
      headerVisible: false,
      dialogVisible: false,
      state: '等待买家付款',
      orderId: '',
      detailOrder: '',
      tableOrder: [],
      timer: null,
      qrcode: '',
      minutes:15,
      seconds:0,
      cancelTime:''
    }
  },
  computed:{
    total(){
      var total = 0;
      this.tableOrder.forEach(item => {
        total += item.book.price * item.count
      })
      return total;
    },
  },
  methods: {
    isPay() {
      this.timer = setInterval(() => {
        this.getRequest('/oms/bookOrder/outTradeNo/' + this.orderId).then((resp) => {
          if (resp.data.state == 'sucess') {
            this.$message.success("支付成功")
            clearInterval(this.timer)
            this.timer = null
            setTimeout(() => {
              this.$router.go(0)
            }, 300)
          }
        })
      }, 500)
    },
    num(n) {
      return n < 10 ? '0' + n : n
    },
    downTime(){
      //倒计时
      let date=(new Date(this.cancelTime).getTime()-new Date().getTime())
      let newDate=new Date(date)
      this.minutes=newDate.getMinutes()
      this.seconds=newDate.getSeconds()
      var _this = this
      var time = window.setInterval(function () {
        if (_this.seconds === 0 && _this.minutes !== 0) {
          _this.seconds = 59
          _this.minutes -= 1
        } else if (_this.minutes === 0 && _this.seconds === 0) {
          _this.seconds = 0
          this.headerVisible=false
          this.dialogVisible=false
          this.state = "交易已关闭"
          window.clearInterval(time)
        } else {
          _this.seconds -= 1
        }
      }, 1000)
    },
    handleClose() {
      this.dialogVisible = false
      this.headerVisible = true
      this.state = "宝贝已拍下，请在15分中内付款；若未及时付款，系统将自动取消订单！"
    },
    againPay() {
      this.dialogVisible = true
      this.headerVisible = false
      this.state = "等待买家付款"
    },
    cancal() {
      this.getRequest('/oms/bookOrder/cancel/'+this.orderId).then(()=>{
        this.$message.success("取消成功")
        this.$router.go(0)
        this.dialogVisible = false
        this.headerVisible = false
        this.state = "交易已关闭"
      })
    }
  },
  watch: {
    dialogVisible(val) {
      if (val == false) {
        clearInterval(this.timer)
        this.timer = null
      }
      if (val == true) {
        this.isPay()
      }
    },
    seconds (newVal) {
      this.num(newVal)
      if(this.minutes==0&&this.seconds==0){
        this.headerVisible=false
        this.dialogVisible=false
        this.state = "交易已关闭"
        this.$router.go(0)
      }
    },
    minutes (newVal) {
      this.num(newVal)
      if(this.minutes==0&&this.seconds==0){
        this.headerVisible=false
        this.dialogVisible=false
        this.state = "交易已关闭"
      }
    },
  },
  created() {
    if (this.$route.query.oid) {
      this.orderId = this.$route.query.oid
    } else {
      this.$router.push('/myOrder')
    }
    this.getRequest('/oms/bookOrder/' + this.orderId).then((resp) => {
      this.detailOrder = resp.data
      this.tableOrder = resp.data.details
      this.cancelTime=resp.data.cancelTime
      if (this.detailOrder.status == 1 && this.detailOrder.qrCode) {
        this.qrcode = this.detailOrder.qrCodeImg
        this.dialogVisible = true
        this.downTime()
      }
      if(this.detailOrder.status == 2){
        this.headerVisible = false
        this.dialogVisible = false
        this.state = "交易成功，等待商家发货"
      }
      if(this.detailOrder.status == 0){
        this.headerVisible = false
        this.dialogVisible = false
        this.state = "交易已关闭"
      }
    })
  },
}
</script>

<style scoped>
.order {
  margin-bottom: 100px;
}
.code{
  text-align: center;
}
.detail-code {
  display: inline-block;
  font: 500 19px 华文黑体;
  color: red;
  margin-bottom: 50px;
  margin-top: 18px;
}
.img-qrcode{
  width: 320px;
  height: 320px;
  margin-top: 20px;
}

.header {
  margin-top: 40px;
  font: 400 18px 华文黑体;
}

.after {
  font: 300 28px 华文宋体;
}

.pay-header {
  border: 1px solid #f5a094;
  background: #fdf3f3;
  margin-top: 30px;
  padding: 25px;
  padding-left: 60px;
}

.el-icon-warning-outline {
  color: red;
  font-size: 25px;
  font-weight: 600;
  margin-right: 10px;
  vertical-align: middle;
  line-height: 45px;
  height: 50px;
}

.btn {
  margin-top: 25px;
  margin-right: 20px;
  font-size: 17px;
  width: 100px;
  padding-left: 15px;
  letter-spacing: 1px;
  border: 2.5px solid #fcf9f9;
  background: #fce2e2;
  color: #ec6767;
}

.btn1 {
  letter-spacing: 13px;
  padding-right: 0px;
}

.btn:hover{
  background: #f8b6b6;
  color: white;
}
.ss {
  font-weight: 600;
  color: #fc3333;
}

.content {
  margin-top: 30px;
}

.content-title {
  z-index: 10;
  font: 300 22px 华文黑体;
  padding: 8px 14px;
  margin-left: 28px;
  border: 2px solid #ee9797;
  border-top-left-radius: 7px 7px;
  border-top-right-radius: 7px 7px;
  border-bottom: 1px solid #fcfafa;
  background: #fcfafa;
}
::v-deep .el-table--border th.el-table__cell, .el-table__fixed-right-patch{
  background: #fdbebe;
  font:500 18px 华文宋体;
  color: #8d8686;
  text-shadow: 1px 1px 1px #f8abab;
}
.content-header {
  background: #fcfafa;
  margin-top: 7.4px;
  border: 1px solid #ee9797;
  padding: 40px;
  font: 300 18px 华文宋体;
}

.content-header hr {
  margin-top: 20px;
  margin-bottom: 20px;
}

.content-header span {
  margin-right: 20px;
}

.a {
  position: relative;
  left: 130px;
  padding-right: 100px;
}

.b {
  display: inline-block;
  margin-bottom: 15px;
}

.cc {
  font-weight: 600;
}

.d {
  left: 20px;
}

.f {
  color: #535050;
  font-family: 宋体;
}

.e {
  color: black;
  font-family: 华文宋体;
}

.table {
  margin-top: 40px;
}

.total {
  margin-top: 30px;
  font: 400 22px 华文宋体;
  display: inline-block;
  width: 95%;
  text-align: right;
}

.num {
  font-size: 33px;
  color: #f63232;
}

.bookTitle {
  position: relative;
  top: -53px;
  left: 15px;
}

::v-deep .el-table th.el-table__cell > .cell {
  text-align: center;
}

.daojishi{
  display: inline-block;
  position: relative;
  top:-73px;
  left: 510px;
  font:600 22px 华文黑体;
  color: #76bdec;
  padding: 10px 20px;
  text-decoration: underline;
}
</style>